<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>localStorage</title>
  <style>
  </style>
</head>
<body>
  
  <label>账号：<input type="text" name="name"></lemailabel><br/>
  <label>手机号：<input type="text" name="mobile"></label><br/>
  <label>邮箱：<input type="text" name="email"></label><br/>
  <label>备注：<input type="text" name="remark"></label><br/>
  
  <button id="wirte">写</button><br/><br/><br/><br/>
  
  <input type="text" id="queryID" placeholder="输入账号获取信息">
  <button id="read">读</button><br/><br/>

  <table border id="infoSheet">
    <tr>
      <th>id</th>
      <th>账号</th>
      <th>手机号</th>
      <th>邮箱</th>
      <th>备注</th>
    </tr>
  </table>

  <script>
    let $ = document.querySelector.bind(document)
    let $$ = document.querySelectorAll.bind(document)

    $('#wirte').onclick = ()=>{
      let [ name,mobile,email,remark ] = Array.prototype.map.call($$('input[type=text]'),item=>item.value)
      let id = `${Math.random()}`.substring(10)
      let info = [
        { id },
        { name },
        { mobile },
        { email },
        { remark },
      ]
      localStorage.setItem(name,JSON.stringify(info))
    }

    $('#read').onclick = ()=>{
      let queryID = $('#queryID').value
      let info = localStorage.getItem(queryID)
      if(info){
        let tr = document.createElement('tr')
        let td = ''
        for(let o of JSON.parse(info)){
          td += `<td>${Object.values(o)[0]}</td>`
        }
        tr.innerHTML = td
        $('#infoSheet').appendChild(tr)
      }else{
        alert('请输入正确的账号')
      }
    }

  </script>
</body>
</html>